<!-- 主页 -->
<template>
  <div class="home-container">
    <!-- 头部区域 -->
    <HeaderComponent />

    <!-- 主体区域 -->
    <div class="main-content">
      <!-- 左侧导航栏 -->
      <SideMenuComponent class="left-menu" @menu-selected="handleMenuSelect" />

      <!-- 右侧内容区 -->
      <div class="right-content">
        <!-- 轮播图（未选择具体科目时显示） -->
        <CarouselComponent 
          v-if="!selectedSubject" 
          class="carousel"
        />

        <!-- 具体科目课程列表（选择具体科目时显示） -->
        <SubjectListComponent 
          v-if="selectedSubject" 
          :subject="selectedSubject" 
          class="subject-list"
        />

        <!-- 热门课程始终显示 -->
        <HotCoursesComponent class="hot-courses" />
      </div>
    </div>
  </div>
</template>

<script setup>
import HeaderComponent from '@/components/User/HeaderComponent.vue'
import SideMenuComponent from '@/components/User/SideMenuComponent.vue'
import CarouselComponent from '@/components/User/CarouselComponent.vue'
import HotCoursesComponent from '@/components/User/HotCoursesComponent.vue'
import SubjectListComponent from '@/components/User/SubjectListComponent.vue'

import { ref } from 'vue'
const selectedSubject = ref(null)

// 接收菜单点击事件并更新当前科目
const handleMenuSelect = (subject) => {
  selectedSubject.value = subject
}
</script>

<style scoped>
.home-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.main-content {
  display: flex;
  margin-top: 30px;
  gap: 30px;
}

.left-menu {
  width: 250px;
  background-color: #131a21;
  border-radius: 8px;
  padding: 20px;
}

.right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.carousel,
.subject-list,
.hot-courses {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
</style>